<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">主题乐园</el-breadcrumb-item>
      <el-breadcrumb-item>飓风湾</el-breadcrumb-item>
    </el-breadcrumb>
    <div>
      <TopicSwiper :swiperOptions="oceanSwiper">
        <TopicSwiperItem
          v-for="(item, index) in swiperList"
          :key="index"
          class="swiper-item"
        >
          <el-radio v-model="radio" :label="index + 1">
            <el-card
              :class="radio == index + 1 ? 'checked' : ''"
              :body-style="{ padding: '0px', width: '210px', height: '369px' }"
            >
              <img :src="item.imgUrl" width="210" height="279" class="image" />
              <div class="describe" style="padding: 14px">
                <h2 :class="radio == index + 1 ? 'h2_border' : ''">
                  0{{ index + 1 }}
                </h2>
                <div>
                  <p class="title">{{ item.title }}</p>
                  <p class="start">
                    欢乐指数：<span v-for="i in item.startNum" :key="i">★</span>
                  </p>
                </div>
              </div>
            </el-card>
          </el-radio>
        </TopicSwiperItem>
      </TopicSwiper>
      <div style="margin-top: 30px">
        <div style="width: 685px; float: left">
          <el-carousel height="356px" v-if="radio == 1">
            <el-carousel-item v-for="(item, index) in carousel_1" :key="index">
              <img :src="item.imgUrl" height="356px" width="685px" />
            </el-carousel-item>
          </el-carousel>
          <el-carousel height="356px" v-if="radio == 2">
            <el-carousel-item v-for="(item, index) in carousel_2" :key="index">
              <img :src="item.imgUrl" height="356px" width="685px" />
            </el-carousel-item>
          </el-carousel>
          <img
            :src="carousel_3.imgUrl"
            alt=""
            v-if="radio == 3"
            height="356px"
            width="685px"
          />
          <el-carousel height="356px" v-if="radio == 4">
            <el-carousel-item v-for="(item, index) in carousel_4" :key="index">
              <img :src="item.imgUrl" height="356px" width="685px" />
            </el-carousel-item>
          </el-carousel>
          <el-carousel height="356px" v-if="radio == 5">
            <el-carousel-item v-for="(item, index) in carousel_5" :key="index">
              <img :src="item.imgUrl" height="356px" width="685px" />
            </el-carousel-item>
          </el-carousel>
          <el-carousel height="356px" v-if="radio == 6">
            <el-carousel-item v-for="(item, index) in carousel_6" :key="index">
              <img :src="item.imgUrl" height="356px" width="685px" />
            </el-carousel-item>
          </el-carousel>
          <el-carousel height="356px" v-if="radio == 7">
            <el-carousel-item v-for="(item, index) in carousel_7" :key="index">
              <img :src="item.imgUrl" height="356px" width="685px" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="content">
          <h3>{{ content_1.h3 | h3Filter() }}</h3>
          <div>
            <span>{{ content_1.span | spanFilter() }}</span>
          </div>
          <p>{{ content_1.p | pFilter() }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopicSwiper from "@/components/TopicSwiper.vue";
import TopicSwiperItem from "@/components/TopicSwiperItem.vue";

// 过滤器中使用data中的数据
// 1. 声明一个that变量
// 2. 在beforeCreate生命周期函数中将this赋值给that
// 3. 在过滤器中通过that.调用
let that;
export default {
  components: {
    TopicSwiper,
    TopicSwiperItem,
  },
  filters: {
    h3Filter() {
      return that[`content_${that.radio}`].h3;
    },
    strongFilter() {
      return that[`content_${that.radio}`].strong;
    },
    spanFilter() {
      return that[`content_${that.radio}`].span;
    },
    pFilter() {
      return that[`content_${that.radio}`].p;
    },
  },
  data() {
    return {
      radio: "1",
      oceanSwiper: {
        slidesPerView: 5,
        spaceBetween: 30,
      },
      swiperList: [
        {
          imgUrl: require("@/assets/images/HurricaneBay-1.png"),
          title: "激流通进",
          startNum: 5,
        },
        {
          imgUrl: require("@/assets/images/HurricaneBay-2.png"),
          title: "完美风暴",
          startNum: 5,
        },
        {
          imgUrl: require("@/assets/images/HurricaneBay-3.png"),
          title: "4D影院",
          startNum: 6,
        },
        {
          imgUrl: require("@/assets/images/HurricaneBay-4.png"),
          title: "魂断血域",
          startNum: 3,
        },
        {
          imgUrl: require("@/assets/images/HurricaneBay-5.png"),
          title: "老船长餐厅",
          startNum: 3,
        },
        {
          imgUrl: require("@/assets/images/HurricaneBay-6.png"),
          title: "哈瓦那故事",
          startNum: 3,
        },
        {
          imgUrl: require("@/assets/images/HurricaneBay-7.png"),
          title: "灯塔商店",
          startNum: 3,
        },
      ],
      carousel_1: [
        {
          imgUrl: require("@/assets/images/HurricaneBay-1-1.png"),
        },
        {
          imgUrl: require("@/assets/images/HurricaneBay-1-2.png"),
        },
        {
          imgUrl: require("@/assets/images/HurricaneBay-1-3.png"),
        },
      ],
      carousel_2: [
        {
          imgUrl: require("@/assets/images/HurricaneBay-2-1.png"),
        },
        {
          imgUrl: require("@/assets/images/HurricaneBay-2-2.png"),
        },
      ],
      carousel_3: {
        imgUrl: require("@/assets/images/HurricaneBay-3-1.png"),
      },
      carousel_4: [
        {
          imgUrl: require("@/assets/images/HurricaneBay-4-1.png"),
        },
        {
          imgUrl: require("@/assets/images/HurricaneBay-4-2.png"),
        },
      ],
      carousel_5: [
        {
          imgUrl: require("@/assets/images/HurricaneBay-5-1.png"),
        },
        {
          imgUrl: require("@/assets/images/HurricaneBay-5-2.png"),
        },
        {
          imgUrl: require("@/assets/images/HurricaneBay-5-3.png"),
        },
      ],
      carousel_6: [
        {
          imgUrl: require("@/assets/images/HurricaneBay-6-1.png"),
        },
        {
          imgUrl: require("@/assets/images/HurricaneBay-6-2.png"),
        },
        {
          imgUrl: require("@/assets/images/HurricaneBay-6-3.png"),
        },
      ],
      carousel_7: [
        {
          imgUrl: require("@/assets/images/HurricaneBay-7-1.png"),
        },
        {
          imgUrl: require("@/assets/images/HurricaneBay-7-2.png"),
        },
      ],
      content_1: {
        h3: "激流勇进",
        strong: "",
        span: "项目特点：船体以提升角度为25°运行至高度26米高空时瞬间下冲（下冲角度40°）娱水 滑翔 失重 惊险 刺激   体验指数：★★★★★☆",
        p: "怀揣梦想,水手们将开始最惊险的海上之旅！船只一会儿被巨浪卷起,一会儿又坠入深不见底的深渊,只有经过激流勇进的考验,才是一名真正的水手！",
      },
      content_2: {
        h3: "完美风暴",
        strong: "",
        span: "项目特点：360°翻转 失重 惊险刺激 顶端速度达到近30千米/小时 最小/最大加速度： -1g/+5g   体验指数：★★★★★",
        p: "随着风暴掀起一波又一波巨浪回转颠簸,海洋之心的秘密已不再遥远。在漩涡中和翻转中挑战自我,你就已经通过了大自然的考验！",
      },
      content_3: {
        h3: "4D影院",
        strong: "",
        span: "项目特点：体验   欢乐指数：★★★★★★ 刺激指数：★★",
        p: "正在努力让自己成为有用之才的托马斯，却在布兰登码头沾了一身奇怪的油渍。他急着要把自己洗干净，却很快就打滑并完全失控。这时他撞进了一个老矿。托马斯要开始一次让他终生难忘的旅行了！和托马斯和他的朋友们一起，开启这段惊险刺激的4D大冒险吧。",
      },
      content_4: {
        h3: "魂断血域",
        strong: "",
        span: "项目特点：灵异 惊悚   欢乐指数：★★★ ",
        p: "阴森、恐怖又奇特的空间内隐藏着千年古尸、狼面人、双角饿狼和各种鬼魂……无论你害怕与否,都能在惊声尖叫中感受挑战的快乐！",
      },
      content_5: {
        h3: "老船长餐厅",
        strong: "",
        span: "",
        p: "",
      },
      content_6: {
        h3: "哈瓦那故事",
        strong: "",
        span: "",
        p: "",
      },
      content_7: {
        h3: "灯塔商店",
        strong: "",
        span: "",
        p: "",
      },
    };
  },
  computed: {},
  beforeCreate() {
    that = this;
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="scss">
::v-deep .el-breadcrumb {
  font-size: 21px;
  line-height: 2;
}

.checked {
  background-color: #f7b324;
  color: #fff;
}

.h2_border {
  border-right: 2px solid #fef2d8 !important;
}

::v-deep .el-radio__input {
  display: none;
}

.swiper-item {
  display: flex;
  flex-direction: column;

  .el-card {
    border-radius: 0 0 20px 20px;
  }

  .el-card:hover {
    background-color: #f7b324;
    color: #fff;
    cursor: pointer;
  }

  .el-card:hover h2 {
    border-right: 2px solid #fef2d8;
  }

  .describe {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    margin-top: 10px;

    h2 {
      border-right: 2px solid #575757;
      padding-right: 5px;
      margin-right: 10px;
    }

    .title {
      font-size: 16px;
      margin-bottom: 5px;
    }

    .start {
      font-size: 12px;
    }
  }
}

.content {
  background-color: #f7b324;
  border-radius: 10px;
  padding: 20px;
  margin-left: 705px;
  min-height: 316px;

  h3 {
    width: max-content;
    padding: 0 20px;
    height: 60px;
    line-height: 60px;
    color: #fff;
    font-size: 24px;
    background-color: #d29004;
    border-radius: 20px;
    text-align: center;
    margin-bottom: 20px;
  }

  > div {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #df9f18;
    padding-bottom: 20px;
    padding-left: 5px;
    margin-bottom: 25px;
  }

  > p {
    line-height: 24px;
    padding-left: 5px;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
  }
}
</style>
